<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>

<div id="app">
    <span>{{title}}</span>
    <ul>
        <li>{{message1}}</li>
        <li>{{message2}}</li>
    </ul>
</div>

<script>
    /*
    *   1. 编写template模板时  可以使用js中的模板语法反引号  解决字符串拼接问题
    *    1. 指令编程
    *    2.声明式编程
    *       jsp   el表达式  ${username}   jstl
    *     响应式   插值语法 {{}}
    *    2. 可以将模板中的html代码直接卸载vm绑定的容器中,vm实例hi将容器中的html代码作为模板进行解析
    * */
    let vm = new Vue({
        el:'#app',
        // template:`<div>
        //             <ul>
        //                 <li>{{message1}}</li>
        //                 <li>{{message2}}</li>
        //             </ul>
        //          </div>`,
         data:{
             title:'hello vue',
             message1:'hello',
             message2:'vue'
         }
    })
    // vm.$mount("#app")
</script>
</body>
</html>